筆記、[FE101] 前端基礎 各種裝飾


Posted by s103071049 on 2021-05-21

一、背景：background

基本裝飾 background

範例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8"> 
    <title>i am title</title>
    <link rel="stylesheet" href="./style.css"/>
  </head>
<body>
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</body>
</html>

背景設定成顏色

針對 id 給背景顏色，並不是所有顏色都可以用文字打。

#box1 {
    background: red;
}

#box2 {
    background: green;
}

也可以透過色碼、rgb，表示顏色

#box1 {
    background: rgb(244, 4, 10);
}


#box2 {
    background: #ff00f0;
}

除了上述 rgb 外，還有 rgba ， a 表示透明度(介於 0~1)，1 = 一般顏色，0 = 全部透明。

#box1 {
    background: rgb(244, 4, 10, 0.5);
}

背景設定成圖片

url() ，括弧內接圖片的位址。也可以用字串將括弧內參數給括起來。

#box1 {
    background: url("./CIMG0376.jpg");
}

因為 div 不夠高，無法看到完整圖片，所以我們可以這麼做

#box1 {
    background: url("./CIMG0376.jpg");
    height:500px;
    width:100000px;
}

當圖片不夠寬或不夠高時，它會重複排列，如果不要重複排列，我們可以這麼做

#box1 {
    background: url("./CIMG0376.jpg") no-repeat;
    height:1000px;
    width:100000px;
}

可以自己調整圖片要向哪對齊
center 表示置中、left、right、top、bottom
最常見的為 center center，兩個都對齊中間

#box1 {
    background: url("./CIMG0376.jpg") no-repeat bottom left;
    height:4000px;
    width:4000px;
}

我們可以藉由 px 調整圖片大小

#box1 {
    background: url("./CIMG0376.jpg") no-repeat center center;
    height:1000px;
    background-size: 400px 400px 
}

或是藉由百分比調整圖片大小

#box1 {
    background: url("./CIMG0376.jpg") no-repeat center center;
    height:3000px;
    background-size: 100% 100% 
}

以上都會幫圖片做伸縮。如果不想做伸縮，我們可以這麼做 :

  • contain 它會幫你的圖片縮到可以放進裡面。要馬高貼合，要馬寬貼合，以圖片的尺寸決定，(不壓縮按照比例放在裡面)。
#box1 {
    background: url("./CIMG0376.jpg") no-repeat center center;

    background-size: contain;
    height:4000px;
}
  • cover 永遠會填滿整個背景，圖片比例會一起縮放。

rmk : 右鍵 => 檢查 => style => 將對應箭頭點開；另外如果是按顏色，可以將調色盤點下去。

二、把自己框起來：border 與 border-radius

邊框有兩種，一種是 border，一種是 outline。實際開發很少用 outline。

範例一、border 、 outline
第一個參數 : 寬度；第二個參數 : 類型；第三個參數 : 顏色

#box1 {
  background: red;
  border: 20px solid green;
}

內容區會被邊框擠掉，因為邊框是往裡面長的。它的高度 = box1高度 + border 兩個的高度。現在盒子的高度設為 30px，兩邊 border 的高度設為 20 px，所以總高度 = 70px。概念參照盒模型(如何調、原理是甚麼)。

#box1 {
  background: red;
  border: 20px solid green;
  height: 30px
}

一樣可從 devtool 調東西。最常用的為 solid。
border-radius 是設定角的弧度。
outline 像是元素的外框，往外面去長。
差異 outline => 不影響元素的寬度、高度；border => 會影響元素的寬度、高度。

範例二、border 的應用

#box1 {
  background: red;
  width:100px;
  height:100px;
  border-radius: 4px;
}

如果 border-radius: 50px => 剛好是圓形，也可以寫 50%。

#box1 {
  background: red;
  width:100px;
  height:100px;
  border-radius: 50%;
}

border 也可以分開設。邊框的交界因為是不同的顏色，會發現像是梯形。


#box1 {
  background: red;
  width:100px;
  height:100px;
  border-top:90px solid green;
  border-bottom:90px solid yellow;
  border-left:90px solid pink;
  border-right:90px solid blue;
}

把寬、高設成 0 ，就變成三角形。所以可以用 css 來畫三角形。

#box1 {
  background: transparent;
  width:0px;
  height:0px;
  border-top:90px solid transparent;
  border-bottom:90px solid yellow;
  border-left:90px solid transparent;
  border-right:90px solid transparent;
}

三角形的大小怎麼設定 ? 依據不同邊的 px 決定。

三、離我遠一點，或我離你遠一點：margin 與 padding

邊距 margin 與 padding

首先，準備兩個相同的 box

#box1 {
  background: orange;
  width:100px;
  height:100px;
}

#box2 {
  background: green;
  width:100px;
  height:100px;
}

增加 padding 30px => 1.變大 2.內容離自己的邊距 30px

#box1 {
  background: orange;
  width:100px;
  height:100px;
  padding: 30px;
}

可以設定不同方向的 padding。 padding-right、padding-left；padding-top、padding-bottom。
簡寫表示 : 只寫一個參數表上下左右；寫兩個參數，第一個參數=上下，第二個參數=左右。

margin 表示離外面的距離，離其他東西有多遠。它不會影響內部元素的寬度、高度。

#box2 {
  background: green;
  width:100px;
  height:100px;
  margin:20px;
}

很多瀏覽器都會預留 margin: 8px 。為了將 body 的 margin 清掉，很多 css 都會做這件事。清完後就會貼合邊邊。

body {
    margin:0;
}

概要整理 : padding=內邊距，margin = 外邊距

四、文字相關 part1：color、font-family、font-weight 與 line-height

color

文字的 color，不像 background 要寫成 background-color，直接寫 color 就可以了。一樣可以用 rgba()、rgb()、十六進位做顏色調整。

#box1 {
  background: orange;

  height:100px;
  color:rgba(30,4,222,0.4);
}

font 系列

font-size 為字的大小

font-weight 為字的粗細。normal = 一般大小、bold = 粗體，從 100~900 字的重量不同，粗細亦不同，通常調多少由設計師決定。

font-family 決定字體。若電腦無支援，瀏覽器會選擇預設字體。


#box1 {
  background: orange;

  height:100px;
  font-size:30px;
  font-weight:bold;
  font-family: "標楷體"
}

距離

letter-spacing 字距、line-height 行高

在處理行高時，通常會用 em ，em 對應到的可以先想成字體大小。基本上 line-height = font-size * em ，所以下面的 line-height 也可以寫成 line-height :18px。
line-height:1.5em，表示行高比例為 1.5em，換句話說，不管怎麼調整 font-size 它的行高比例都不變。

#box1 {
  background: orange;

  height:100px;
  font-size:12px;
  font-weight:bold;
  font-family: 標楷體;
  letter-spacing:1px;
  line-height:1.5em;
}

text-align 表靠哪對齊，僅限於水平對齊。


#box1 {
  background: orange;

  height:100px;
  font-size:12px;
  font-weight:bold;
  font-family: 標楷體;
  letter-spacing:1px;
  line-height:1.5em;
  text-align: center;
}

css 如何置中對齊 ?

法一、line-height
承上文，如果高度 = 100px，我就把 line-height 調成 100px，它的行高就會和盒子一樣。但如果有多行字，每一行中間就會隔著 100px，會破功。

#box1 {
  background: orange;

  height:100px;
  font-size:12px;
  font-weight:bold;
  font-family: 標楷體;
  letter-spacing:1px;
  line-height:100px;
  text-align: center;
}

法二、padding
不設高度、不設 line-height，用 padding 將其撐開，上下 y(px) 左右 x(px)，缺點是較難制定它的高度，需要自己算，優點 : 多行仍可置中。


#box1 {
  background: orange;


  font-size:12px;
  font-weight:bold;
  font-family: 標楷體;
  letter-spacing:1px;
  padding:30px 0px;
  text-align: center;
}

五、文字相關 part2：word-break 與 white-space

有些語言沒有空格或句子特別長，要怎麼調整 ? 文字很長、有空白的時候行為該如何顯示 ?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8"> 
    <title>i am title</title>
    <link rel="stylesheet" href="./style.css"/>
  </head>
<body>
  <div id="box1">box1sssssssssssssssssssssssssddddddddddddddddddgggggggggggggggggfffffffffffffddddddddddsssssssseeeeeeeeeeeeeeeee
  </div>
  <div id="box2">box2</div>
</body>
</html>

如果沒有設定寬度，它會占滿整個空間，沒有問題~

如果有設定寬度，文字會超出設定的寬度。解決方法 : 調整 css屬性，word-break。
break-all，單字會從中間被切開(一個單字被切成兩行)；break-word，會按照字來切。

想讓文字放在同一行 : 調整 css屬性 white space => nowrap => 字永遠都換在同一行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8"> 
    <title>i am title</title>
    <link rel="stylesheet" href="./style.css"/>
  </head>
<body>
  <div id="box1">BRYCE:All I've wanted is for Juli Baker to leave me alone. => But there was no going back. I liked her. 
  </div>
  <div id="box2">box2</div>
</body>
</html>

六、你滿了，那我就漫出來了：overflow 與 text-overflow

超出寬度，該如何處理 ?

  • overflow: hidden => 超出的部份會被藏起來
  • overflow: scroll => 全部都變成滾動區
  • overflow: auto => 超出的部份會變成滾動區
    #box1 {
background: orange;
width: 200px;
font-size:12px;
font-weight:bold;
text-align: center;
white-space:nowrap;
overflow: hidden;
}
  • text-overflow: ellipsis=> 超出的部份會用 ... 蓋掉
    前提 : overflow: hidden 且 white-space:nowrap(不然不能變成一整行)
    #box1 {
background: orange;
width: 200px;
font-size:12px;
font-weight:bold;
text-align: center;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
    差異點 : over-flow 應用範圍較廣，text-overflow 是針對文字。

七、加了我質感瞬間升級：transition (漸變)

css 屬性 transition 用途為定義漸變效果。

transition: 第一個參數 第二個參數 第三個參數;

  • 第一個參數 : 表對誰作用。選 all 表對所有屬性作用。
  • 第二個參數 : 表對其描述。1s 表漸變時間。
  • 第三個參數 : 漸變時間的動畫。
#box1 {
  background: orange;
  width: 200px;
  height:100px;
  transition:all 1s;
} 
#box1:hover{
    background: green;
    color:white;
}

做的精美一點。
cursor pointer 表示移動鼠標上去，可以點。
不會將 transition:all 1s 放到 #box1:hover，因為這表示移上去有，放開就沒有。

#box1 {

  width: 200px;
  height:100px;
  border-radius:20px;
  text-align:center;
  line-height: 100px;
  transition:all 1s;
  color:black;
  border:5px solid orange;
} 
#box1:hover{
    background: orange;
    color:white;
    cursor:pointer;
}

當然，也可以用漸變，變寬度、高度

#box1:hover{
    background: orange;
    color:white;
    cursor:pointer;
    width:300px;
    height: 500px
}

要注意 : 可能會有效能問題。例如 : 動寬跟高，旁邊的元素會需要重些排列。

八、Die Verwandlung：transform 的妙用

參照：CSS 基礎 Part4 定位 position
用途：置中、3D 特效、搭配 transition

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8"> 
    <title>i am title</title>
    <link rel="stylesheet" href="./style.css"/>
  </head>
<body>
  <div class="box" id=box1>box1</div>
</body>
</html>

transform 後面接的類似在程式裡面呼叫一個 function。

scale(x) 會依照圖形的中心點，放大 x 倍。

#box1 {
    width:200px;
    height:100px;
    border-radius:30px;
    text-align:center;
    line-height:100px;
    color:white;
    background:orange;
    transition: all 0.3s;
    margin:100px;
}
#box1:hover {
    transform:scale(2);

}

將 dev-tool 打開，element => hover，裡面會告訴你有那些特效。

  • rotate(360deg) 會旋轉 360 度
  • translateX(50px) 往右移 50px
  • translate(50px, 20px) 往右移 50px 往下移 20px

使用 transform 移位，不會影響其它元素，且它是按照原本位置偏移。所以在動畫中移動位置，通常是使用 transform。

另外，也可以使用 transform 將圖形置中。

現在圖形佔畫面畫面的高度，會是 50%。 left 一樣也可以設成 50%，所以現在這個圖形左上角的點就會是螢幕正中心。但元素是以左上角的點為起點畫出的圖形，故元素本身並不在正中間。

可以利用 transform:translate(a%, b%) 這個 % 是按照元素的寬度、高度。所以 x軸移動圖形自己的 a% 過去，同理 y軸一樣移動圖形自己的 b% 過去。

透過這樣的操作，圖形就移到正中間，達成既垂直又水平置中的效果。

#box1 {
    width:200px;
    height:100px;
    border-radius:30px;
    text-align:center;
    line-height:100px;
    color:white;
    background:orange;
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%, -50%);

}

也可以將 position:fixed



s103071049




Related Posts

[JS] 箭頭函式和一般函式 this 指向

[JS] 箭頭函式和一般函式 this 指向

 Akira
1731. The Number of Employees Which Report to Each Employee

1731. The Number of Employees Which Report to Each Employee

 ikl258794613
VS Code 中文套件導致 TypeScript 偵錯問題

VS Code 中文套件導致 TypeScript 偵錯問題

 luckstar77

Comments